import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Card } from 'react-vant';
import { Toast, NavBar } from 'react-vant';
const Detail = () => {
    const location = useLocation()
    const v = location.state
    const navigate=useNavigate()
    return (
        <div>
            <NavBar
                title={v.title}
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />
            <Card round>
                <Card.Body
                    style={{
                        height: '20vh',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <img src={v.image} alt='' />
                    <p>{v.word}</p>
                    <h3>{v.price}</h3>
                </Card.Body>
            </Card>
        </div>
    )
}
export default Detail